<template>
  <div class="role-authorization">
    <xr-new-header
      ref="xrHeader"
      show-search
      label="角色权限控制"
      placeholder="请输入员工名称/手机号"
      icon-class="wk wk-user"
      icon-color="#19B5F6"
      @search="headerSearch"
    >
      <el-button
        slot="ft"
        :disabled="roleList.length === 0"
        size="small"
        type="primary"
        icon="el-icon-user-solid"
        @click="addEmployees"
      >
        关联员工
      </el-button>
    </xr-new-header>
    <div class="role-box">
      <!-- 左边导航 -->
      <div v-loading="roleMenuLoading" class="nav">
        <div class="nav__hd">
          <img src="@/assets/img/admin/role.png" alt="" />
          <span>全部角色</span>
          <el-button
            type="text"
            icon="el-icon-circle-plus"
            class="add-btn"
            @click="newRoleBtn"
            >创建角色</el-button
          >
        </div>
        <!-- 角色列表 -->
        <div class="role-nav-box">
          <div
            v-for="(item, index) in roleList"
            :key="index"
            :class="{
              'is-select':
                showIndex == index || item.roleId == roleActive.roleId,
            }"
            class="menu-item"
            @click="roleMenuSelect(item)"
          >
            <span>{{ item.roleName }}</span>
            <div
              class="menu_operate"
              :class="
                item.remark != 'admin' &&
                item.remark != 'project' &&
                showIndex == index
                  ? 'show_menu'
                  : ''
              "
            >
              <i
                class="el-icon-edit"
                @click="roleEditBtn(item)"
                v-if="item.remark != 'admin'"
              ></i>
              <el-tooltip
                class="item"
                content="置顶"
                placement="top"
                effect="light"
              >
                <i
                  class="el-icon-upload2"
                  @click="topsSort(item)"
                  v-if="index != 0"
                ></i>
              </el-tooltip>
              <i
                class="el-icon-delete"
                @click="roleDelect(item)"
                v-if="item.remark != 'admin'"
              ></i>
            </div>
          </div>
        </div>
      </div>
      <!-- 角色编辑 -->
      <el-dialog
        :title="roleTitle"
        :visible.sync="newRoleVisible"
        @close="newRoleClose"
        :close-on-click-modal="false"
        class="role_auth"
        width="352px"
      >
        <el-form
          :model="role"
          :rules="rolesRules"
          label-position="top"
          ref="roleAuth"
        >
          <el-form-item label="角色名称" prop="title">
            <el-input
              v-model="role.title"
              :maxlength="30"
              class="input-role"
              clearable
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="newRoleClose">取 消</el-button>
          <el-button type="primary" @click="newRoleSubmit">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 右边内容 -->
      <div class="content-box">
        <el-tabs v-model="mainMenuIndex">
          <el-tab-pane label="角色员工" name="user">
            <div v-loading="userLoading" class="content-table">
              <flexbox class="content-table-header">
                <div class="content-table-header-reminder">
                  <reminder
                    v-if="showReminder"
                    :content="getReminderContent()"
                  />
                </div>
              </flexbox>
              <el-table
                :data="tableData"
                :height="tableHeight"
                class="role_table"
                tooltip-effect="dark popper_sty"
              >
                <el-table-column
                  v-for="(item, index) in tableList"
                  :prop="item.field"
                  :label="item.label"
                  :key="index"
                  show-overflow-tooltip
                />
                <el-table-column label="角色" prop="roleName">
                  <template slot-scope="scope">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="changeMark(scope.row.roleName)"
                      placement="top"
                      popper-class="popper_sty"
                      v-if="
                        scope.row.roleName && scope.row.roleName.length > 10
                      "
                    >
                      <span class="one-line"> {{ scope.row.roleName }}</span>
                    </el-tooltip>
                    <span v-else>{{ scope.row.roleName }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      icon="el-icon-edit"
                      @click="employeeHandleClick(scope.row)"
                      >编辑</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <div class="p-contianer">
                <el-pagination
                  :current-page="currentPage"
                  :page-sizes="pageSizes"
                  :page-size.sync="pageSize"
                  :total="total"
                  class="p-bar"
                  background
                  layout="prev, pager, next, sizes, total, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            v-if="roleActive && showRuleSet"
            label="角色权限"
            name="rule"
            class=""
          >
            <!-- 权限管理 -->
            <div v-loading="ruleLoading" class="jurisdiction-box">
              <el-button
                v-if="roleActive"
                :disabled="roleList.length === 0"
                size="small"
                type="primary"
                class="jurisdiction-edit"
                @click="ruleSubmit"
              >
                保存
              </el-button>
              <div class="menu_box">
                <span
                  v-for="(item, index) in ruleMenuList"
                  class="menu_item"
                  :class="selIndex == index ? 'sel_index' : ''"
                  @click="selIndex = index"
                  :key="index"
                >
                  {{ item.label }}
                </span>
              </div>
              <div v-for="(item, index) in ruleMenuList" :key="index">
                <div v-show="index == selIndex">
                  <!-- 功能模块  -->
                  <div
                    v-if="item.type == 'tree'"
                    :style="{ height: treeHeight + 'px' }"
                    class="jurisdiction-content"
                  >
                    <div class="jurisdiction-content-checkbox">
                      <div
                        v-for="(item2, index2) in item.data"
                        :key="index2"
                        class="tree_container"
                      >
                        <el-tree
                          :data="[item2]"
                          :ref="'tree_' + index2"
                          :indent="0"
                          :expand-on-click-node="false"
                          :props="defaultProps"
                          show-checkbox
                          node-key="menuId"
                          empty-text=""
                          default-expand-all
                          class="menu_tree"
                        >
                          <span
                            slot-scope="{ node }"
                            :class="{
                              'node-label': node.level == 1 || node.level == 2,
                            }"
                            >{{ node.label }}
                            <!-- <el-button
                              v-if="
                                node.level == 2 && canSetField(node.data.realm)
                              "
                              icon="wk wk-manage"
                              type="text"
                              @click="fieldSetClick(node)"
                              style="font-size: 12px"
                              >字段授权</el-button
                            > -->
                          </span>
                        </el-tree>
                        <el-divider
                          v-if="
                            index2 != item.data.length - 1
                          "
                        ></el-divider>
                      </div>
                    </div>
                  </div>
                  <!-- 数据权限  -->
                  <div v-else class="jurisdiction-content">
                    <div class="data-radio">
                      <el-radio-group v-model="item.value">
                        <el-radio :label="1">本人</el-radio>
                        <el-radio :label="2">本人及下属</el-radio>
                        <el-radio :label="3">本部门</el-radio>
                        <el-radio :label="4">本部门及下属部门</el-radio>
                        <el-radio :label="5">全部</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 关联员工 -->
    <relate-empoyee
      :visible="relateEmpoyeeShow"
      :role-id="roleId"
      ref="relate_empoyee"
      @save="employeesSave"
    />
    <!-- 字段授权 -->
    <field-set-dialog
      :visible.sync="setFieldShow"
      :role-id="roleId"
      :label="setFieldLabel"
    />
    <!-- 角色编辑 -->
    <edit-role-dialog
      v-if="editRoleDialogShow"
      :selection-list="selectionList"
      :visible.sync="editRoleDialogShow"
      @change="getUserList"
    />
  </div>
</template>

<script>
import { userListAPI } from "@/api/common";
import { adminRoleRelatedUserAPI } from "@/api/admin/role";
import {
  systemRuleByTypeAPI,
  roleAddAPI,
  roleDeleteAPI,
  roleUpdateAPI,
  updateRoleMenuAPI,
  unbindingUserAPI,
  systemRoleByTypeAPI,
  topSortAPI,
} from "@/api/admin/role";
import RelateEmpoyee from "../components/RelateEmpoyee";
import FieldSetDialog from "./components/FieldSetDialog";
import Reminder from "@/components/Reminder";
import XrNewHeader from "@/components/XrNewHeader";
import EditRoleDialog from "../employeeDep/components/EditRoleDialog";
import crmTypeModel from "@/views/crm/model/crmTypeModel";
export default {
  components: {
    RelateEmpoyee,
    FieldSetDialog,
    Reminder,
    XrNewHeader,
    EditRoleDialog,
  },
  data() {
    return {
      pid: "",
      title: "",
      searchInput: "",
      tableData: [], // 与角色关联的员工
      tableHeight: document.documentElement.clientHeight - 340, // 表的高度
      treeHeight: document.documentElement.clientHeight - 230, // 表的3度
      currentPage: 1,
      pageSize: 15,
      pageSizes: [15, 30, 45, 60],
      total: 0,
      tableList: [
        { label: "姓名", field: "realname" },
        { label: "手机号", field: "mobile" },
        { label: "部门", field: "deptName" },
        // { label: "角色", field: "roleName" },
      ],

      // 创建角色
      newRoleVisible: false,
      role: {}, // 操作角色的框 关联的信息
      roleList: [], // 角色列表 list属性 是信息
      mainMenuIndex: "user", // 角色员工  角色权限 切换 默认左边
      // 权限管理
      ruleMenuIndex: "data", // 默认模块 工作台
      ruleMenuList: [],
      defaultProps: {
        children: "childMenu",
        label: "menuName",
      },
      relateEmpoyeeShow: false,
      // 选中的角色
      roleActive: null,
      dropdownHandleRole: null, // 下拉操作编辑角色
      // 新建编辑角色title
      roleTitle: "",
      //   加载
      roleMenuLoading: false,
      // 权限加载中
      ruleLoading: false,
      // 员工列表加载中
      userLoading: false,
      // 字段授权
      setFieldLabel: "",
      setFieldShow: false,
      // 角色操作
      selectionList: [],
      editRoleDialogShow: false,
      selIndex: 0,
      showIndex: -1,
      rolesRules: {
        title: [
          { required: true, message: "角色名称不能为空", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    roleId() {
      if (this.roleActive) {
        return this.roleActive.roleId;
      }
      return "";
    },

    // 展示角色权限
    showRuleSet() {
      if (this.roleActive) {
        return (
          this.roleActive.remark != "admin" &&
          this.roleActive.remark != "project"
        );
      }
      return false;
    },

    // 展示提示问题
    showReminder() {
      if (this.roleActive) {
        return this.roleActive.remark == "project";
      }
      return false;
    },
  },
  mounted() {
    /** 控制table的高度 */
    window.onresize = () => {
      this.tableHeight = document.documentElement.clientHeight - 340;
      this.treeHeight = document.documentElement.clientHeight - 230;
    };
    /** 获取权限信息 */
    // this.pid = this.$route.params.pid;
    // this.title = this.$route.params.title;
    this.getRulesList();
    this.getLeftList();
  },
  methods: {
    /**
     * 置顶角色
     */
    topsSort({ roleName, roleId }) {
      this.$confirm(`确认要置顶 “${roleName}” 吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        topSortAPI(roleId).then((res) => {
          this.getLeftList();
          this.$message.success(res.msg);
        });
      });
    },
    /**
     * 获取权限规则信息
     */
    getRulesList() {
      systemRuleByTypeAPI().then((res) => {
        if (res.data.dataList) {
          this.ruleMenuList = [
            {
              label: "功能模块",
              index: "data",
              type: "tree",
              value: [],
              data: res.data.dataList,
            },
          ];
        } else {
          this.ruleMenuList = [];
        }
        this.getRoleRulesInfo();
      });
    },

    /**
     * 获取角色列表
     */
    getLeftList() {
      this.roleMenuLoading = true;
      systemRoleByTypeAPI()
        .then((res) => {
          this.roleList = res.data;
          /** 判断数据是否存在 */
          let hasActive = false;
          if (this.roleActive) {
            for (let index = 0; index < this.roleList.length; index++) {
              const item = this.roleList[index];
              if (item.roleId == this.roleActive.roleId) {
                this.roleActive = item;
                this.getRoleRulesInfo();
                hasActive = true;
                break;
              }
            }
          }
          if (!hasActive && this.roleList.length) {
            this.roleActive = this.roleList[0];
            this.getRoleRulesInfo();
          }
          this.refreshUserList();
          this.roleMenuLoading = false;
        })
        .catch(() => {
          this.roleMenuLoading = false;
        });
    },

    /**
     * 关联员工
     */
    addEmployees() {
      this.relateEmpoyeeShow = Date.now();
    },

    /**
     * 关联员工确定
     */
    employeesSave(e) {
      adminRoleRelatedUserAPI({
        userIds: e,
        roleIds: [this.roleId],
      })
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("操作成功");
            this.$refs.relate_empoyee.clearDatas();
            this.relateEmpoyeeShow = false;
            this.getUserList();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(() => {});
    },

    /**
     * 编辑角色
     */
    employeeHandleClick(row) {
      this.selectionList = [row];
      this.editRoleDialogShow = true;
    },
    /**
     * 创建角色-取消按钮
     */
    newRoleClose() {
      this.$refs.roleAuth.resetFields();
      this.newRoleVisible = false;
    },
    /**
     * 创建角色
     */
    newRoleBtn() {
      this.roleTitle = "创建角色";
      this.newRoleVisible = true;
      this.role = {};
    },
    /**
     * 角色说明文字
     */
    getReminderContent() {
      if (this.roleActive && this.roleActive.remark == "project") {
        return "项目管理员拥有“项目管理”模块所有权限，能看到并维护所有项目信息";
      }
      return "";
    },

    /**
     * 角色编辑
     */
    roleEditBtn(val) {
      this.roleTitle = "编辑角色";
      this.role = {
        title: val.roleName,
        pid: val.roleType,
        id: val.roleId,
      };
      this.newRoleVisible = true;
    },

    /**
     * 删除
     */
    roleDelect(val) {
      this.$confirm("此操作将永久删除是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        roleDeleteAPI({ roleId: val.roleId }).then((res) => {
          if (this.roleList.length) {
            this.roleActive = this.roleList[0];
            // 点击角色 复制权限 用于编辑操作
            this.getRoleRulesInfo();
          }
          this.getLeftList();
          this.$message.success("删除成功");
        });
      });
    },
    /**
     * 角色编辑-确定
     */
    newRoleSubmit() {
      this.$refs.roleAuth.validate((valid) => {
        if (valid) {
          if (this.roleTitle == "创建角色") {
            roleAddAPI({
              roleName: this.role.title,
            }).then((res) => {
              this.getLeftList();
              this.$message.success("添加成功");
              this.newRoleClose();
            });
          } else {
            roleUpdateAPI({
              roleName: this.role.title,
              roleType: this.role.pid,
              roleId: this.role.id,
            }).then((res) => {
              this.getLeftList();
              this.$message.success("编辑成功");
              this.newRoleClose();
            });
          }
        }
      });
    },

    /**
     * 角色列表点击
     */
    roleMenuSelect(val) {
      this.roleActive = val;
      if (this.mainMenuIndex == "rule" && !this.showRuleSet) {
        this.mainMenuIndex = "user";
      }
      this.getRoleRulesInfo();
      this.refreshUserList();
    },
    /**
     * 获取权限信息 需在roleActive获取之后
     */
    getRoleRulesInfo() {
      if (this.roleActive && this.ruleMenuList.length) {
        // if (this.pid == 2 || this.pid == 10) {
        // const lastItem = this.ruleMenuList[this.ruleMenuList.length - 1];
        // if (lastItem.type != "data") {
        // this.ruleMenuList.push({
        //   label: "数据权限",
        //   index: "info",
        //   type: "data",
        //   value: this.roleActive.dataType,
        // });
        // }
        // }
        if (this.ruleMenuList.length == 1) {
          this.ruleMenuList.push({
            label: "数据权限",
            index: "info",
            type: "data",
            value: this.roleActive.dataType,
          });
        }

        for (let index = 0; index < this.ruleMenuList.length; index++) {
          const element = this.ruleMenuList[index];
          if (element.type == "tree") {
            let newEle = element.data;
            newEle.forEach((it, i) => {
              let newRlues = this.getsRoleRules(
                this.roleActive.rules[element.index],
                it
              );
              this.$nextTick(() => {
                const treeRefs = this.$refs["tree_" + i];
                if (treeRefs) {
                  if (
                    Object.prototype.toString.call(treeRefs) == "[object Array]"
                  ) {
                    treeRefs.length && treeRefs[0].setCheckedKeys(newRlues);
                  } else {
                    treeRefs.setCheckedKeys(newRlues);
                  }
                }
              });
            });
          } else {
            element.value = this.roleActive.dataType;
          }
        }
      }
    },
    /**
     * 获得check的实际数据
     */
    getsRoleRules(array, tree) {
      if (!array) {
        array = [];
      }

      var hasRemove = false;
      var copyArray = this.copyItem(array);
      for (
        let firstIndex = 0;
        firstIndex < tree.childMenu.length;
        firstIndex++
      ) {
        const firstItem = tree.childMenu[firstIndex];

        if (!firstItem.hasOwnProperty("children")) {
          if (firstItem.length + 1 != copyArray.length) {
            this.removeItem(copyArray, tree.id);
          }
          return copyArray;
        }

        for (let index = 0; index < array.length; index++) {
          const element = array[index];
          var temps = [];
          for (
            let secondIndex = 0;
            secondIndex < firstItem.childMenu.length;
            secondIndex++
          ) {
            const secondItem = firstItem.childMenu[secondIndex];
            if (secondItem.id == element) {
              temps.push(secondItem);
            }
          }
          if (temps.length != firstItem.childMenu.length) {
            hasRemove = true;
            this.removeItem(copyArray, firstItem.id);
          }
        }
      }

      if (hasRemove) {
        this.removeItem(copyArray, tree.id);
      }

      var checkedKey = [];
      for (let index = 0; index < copyArray.length; index++) {
        const element = copyArray[index];
        if (element) {
          checkedKey.push(parseInt(element));
        }
      }

      return checkedKey;
    },
    copyItem(array) {
      var temps = [];
      for (let index = 0; index < array.length; index++) {
        temps.push(array[index]);
      }
      return temps;
    },
    removeItem(array, item) {
      var removeIndex = -1;
      for (let index = 0; index < array.length; index++) {
        if (item == array[index]) {
          removeIndex = index;
          break;
        }
      }
      if (removeIndex > 0) {
        array.splice(removeIndex, 1);
      }
    },
    containItem(array, item) {
      for (let index = 0; index < array.length; index++) {
        if (item == array[index]) {
          return true;
        }
      }
      return false;
    },

    /**
     * 头部搜索
     */
    headerSearch(search) {
      this.searchInput = search;
      this.refreshUserList();
    },

    /**
     * 刷新员工列表
     */
    refreshUserList() {
      this.currentPage = 1;
      this.getUserList();
    },

    /**
     * 员工列表
     */
    getUserList() {
      if (!this.roleActive) {
        this.tableData = [];
        this.total = 0;
        return;
      }

      this.userLoading = true;
      userListAPI({
        page: this.currentPage,
        limit: this.pageSize,
        roleId: this.roleActive.roleId,
        realname: this.searchInput,
      })
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.totalRow;
          this.userLoading = false;
        })
        .catch(() => {
          this.userLoading = false;
        });
    },
    /**
     * 更改每页展示数量
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.refreshUserList();
    },

    /**
     * 更改当前页数
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getUserList();
    },

    // 权限提交
    ruleSubmit() {
      this.ruleLoading = true;
      let rules = [];
      let infoData = "";
      for (let index = 0; index < this.ruleMenuList.length; index++) {
        const element = this.ruleMenuList[index];
        if (element.type == "tree") {
          element.data.forEach((it, i) => {
            const treeRefs = this.$refs["tree_" + i];
            if (treeRefs) {
              if (
                Object.prototype.toString.call(treeRefs) == "[object Array]"
              ) {
                rules = rules.concat(treeRefs[0].getCheckedKeys());
              } else {
                rules = rules.concat(treeRefs.getCheckedKeys());
              }
            }
          });
        } else {
          infoData = element.value;
        }
      }
      // 剔除二级父节点，解决推过来按钮默认选中问题
      if(this.ruleMenuList.length>0&&this.ruleMenuList[0]&&this.ruleMenuList[0].data){
        let ruList = this.ruleMenuList[0].data
        ruList.forEach((item)=>{
          if(item.childMenu.length>0){
            item.childMenu.forEach((item2)=>{
              if(rules.includes(item2.menuId)){
                rules.splice(rules.indexOf(item2.menuId),1)
              }
            })
          }
        })
      }
      updateRoleMenuAPI({
        menuIds: rules,
        dataType: infoData,
        roleId: this.roleActive.roleId,
        roleName: this.roleActive.roleName,
      })
        .then((res) => {
          this.getLeftList();
          this.$message.success("编辑成功");
          this.ruleLoading = false;
        })
        .catch(() => {
          this.ruleLoading = false;
        });
    },

    /**
     * 是否能字段设置
     */
    // canSetField(type) {
    //   if (this.pid == 10) return false;
    //   return (
    //     [
    //       "leads",
    //       "customer",
    //       "contacts",
    //       "business",
    //       "contract",
    //       "receivables",
    //       "refund",
    //       "product",
    //       "visit",
    //       "overdue",
    //     ].includes(type) && this.ruleMenuIndex === "data"
    //   );
    // },

    /**
     * 权限设置
     */
    fieldSetClick(node) {
      this.setFieldLabel = crmTypeModel[node.data.realm];
      this.setFieldShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.role_auth /deep/ .el-form-item__label {
  padding: 0 !important;
}
.role_auth /deep/ .el-dialog__body {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.role-authorization {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.title {
  font-size: 18px;
  height: 40px;
  padding: 0 20px;
  line-height: 40px;
  margin: 10px 0;
  color: #333;
}
.role-box {
  height: calc(100% - 60px);
  overflow: hidden;
  position: relative;
}
.nav {
  width: 280px;
  background: #fff;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding-right: 14px;
  padding-left: 14px;
  padding-bottom: 30px;
}
.nav__hd {
  position: relative;
  padding: 14px 0 14px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  .el-button {
    position: absolute;
    top: 10px;
    right: 15px;
  }
  img {
    width: 20px;
    height: 20px;
    margin-right: 11px;
  }
}

.content-box {
  background: #fff;
  margin-left: 279px;
  height: 100%;
  overflow: hidden;
  padding-top: 10px;
  position: relative;
  border-left: 1px solid #ebebeb;
}
.content-table {
  overflow: hidden;
}
.content-table > .el-button {
  float: right;
  margin-bottom: 15px;
  margin-right: 30px;
}
.content-box .content-table-span {
  color: #2362fb;
  margin-left: 5px;
  cursor: pointer;
}

.content-table-header {
  padding: 0 15px 5px;
  .content-table-header-reminder {
    flex: 1;
    margin-right: 5px;
  }
}

/* 权限管理 */
.jurisdiction-content {
  height: calc(100% - 61px);
  position: relative;
  overflow: hidden;
  padding-bottom: 20px;
}
.content-left {
  height: 100%;
  margin-right: 250px;
  overflow: hidden;
}
.content-right {
  width: 250px;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}
.jurisdiction-box {
  padding-bottom: 15px;
  height: calc(100% - 61px);
  overflow: hidden;
  position: relative;
  .menu_box {
    margin-left: 16px;
    margin-right: 16px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
    .menu_item {
      height: 30px;
      border: 1px solid #d6dade;
      border-radius: 4px;
      padding: 0 18px;
      display: inline-block;
      line-height: 30px;
      margin-right: 8px;
      cursor: pointer;
      color: #666666;
    }
  }

  .sel_index {
    border: 1px solid #0066f9 !important;
    color: #0066f9 !important;
  }
}
.jurisdiction-content-checkbox {
  border-right: 1px dashed $xr-border-line-color;
  height: calc(100% - 47px);
  overflow-y: scroll;
  padding: 16px;

  /deep/ .el-tree-node__content:hover {
    background-color: white;
    color: $xr-color-primary;
  }
}
.jurisdiction-content-checkbox
  .el-tree
  /deep/
  .el-tree-node
  > .el-tree-node__content {
  margin-bottom: 20px;
  min-width: 150px;
}
.jurisdiction-content-checkbox /deep/ .el-tree .el-tree-node {
  white-space: inherit;
  margin-bottom: 5px;
}
.jurisdiction-content-checkbox
  /deep/
  .el-tree
  > .el-tree-node
  > .el-tree-node__children
  > .is-expanded
  > .el-tree-node__children
  > .is-expanded {
  display: inline-block;
}
.role-authorization
  /deep/
  .el-tree-node
  .el-tree-node__children
  .el-tree-node__content
  .el-tree-node__expand-icon {
  display: none;
}
.data-radio {
  padding: 5px 30px;
}
.data-radio .el-radio {
  display: block;
  margin: 20px 0;
}
/* 创建角色 */
.input-role {
  width: 100%;
}
.role-nav-box {
  line-height: 30px;
  overflow-y: auto;
  height: calc(100% - 50px);
  background: #f5f6fb;
}
// 菜单
.menu-item {
  color: #333;
  font-size: 13px;
  padding: 0 15px;
  // height: 40px;
  line-height: 40px;
  cursor: pointer;
  position: relative;
  > span {
    display: inline-block;
    width: 70%;
  }
  .icon-close {
    position: absolute;
    top: 0;
    right: 8px;
    z-index: 1;
    display: none;
  }
  .menu_operate {
    position: absolute;
    display: flex;
    align-items: center;
    right: 0;
    top: 9px;
    display: none;
    i {
      margin-right: 4px;
      width: 24px;
      height: 24px;
      // background: #f5f6fb;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    i:hover {
      background: #d9e3ff;
      color: #0066f9;
    }
  }
  .show_menu {
    display: flex !important;
  }
}
.menu-item:hover .menu_operate {
  display: flex !important;
}
.menu-item.is-select,
.menu-item:hover {
  background: #edf1fc;
}
.menu-item:hover span {
  color: #0066f9;
}
.menu-item.is-select span {
  color: #0066f9;
}

.menu-item:hover::before,
.menu-item.is-select::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  background-color: #5383ed;
}

.role-nav-box .menu-item:hover .icon-close {
  display: block;
  float: right;
}
.jurisdiction-edit {
  text-align: right;
  position: absolute;
  top: 0;
  right: 20px;
  z-index: 3;
}

/** 分页布局 */
.p-contianer {
  position: relative;
  background-color: white;
  height: 44px;
  border: none !important;
  .p-bar {
    float: right;
    margin: 5px 100px 0 0;
    font-size: 14px !important;
  }
}

// .el-tabs /deep/ .el-tabs__nav-wrap::after {
//   display: none !important;
// }

.el-tabs /deep/ .el-tabs__header {
  padding: 0 16px;
  margin: 0 0 15px !important;
}

.el-tabs /deep/ .el-tabs__item {
  font-size: 13px !important;
  height: 40px !important;
  line-height: 40px !important;
}

.node-label {
  font-weight: bold;
  font-size: 15px;
  position: relative;
  .el-button {
    position: absolute;
    top: -8px;
    right: -80px;
    /deep/ span {
      margin-left: 3px;
    }
  }
}
.role_table {
  width: calc(100% - 16px);
  margin-left: 16px;
  padding-right: 16px;
}
.role_table /deep/ th {
  background: #f5f6fb !important;
  border: none !important;
}
/deep/.role_table.el-table {
  border: none !important;
}
@import "../styles/table.scss";
.menu_tree /deep/ > .el-tree-node {
  background: #f5f6fb !important;
  padding: 10px 0;
  > .el-tree-node__content {
    margin-bottom: 0 !important;
  }
}
.menu_tree /deep/ > .el-tree-node.is-expanded {
  background: transparent !important;
  > .el-tree-node__content {
    margin-bottom: 16px !important;
  }
}
.menu_tree /deep/.el-tree-node:focus > .el-tree-node__content {
  background: transparent;
}
.menu_tree /deep/ .el-tree-node__content:hover {
  background: transparent !important;
}
.menu_tree /deep/ .el-tree-node__children .el-tree-node__content:hover{
  background: #F5F6FB !important;
}
</style>
<style>
.menu_tree
  > .el-tree-node
  > .el-tree-node__children
  > .el-tree-node
  > .el-tree-node__content {
  padding-left: 15px !important;
  width: 100% !important;
  background: #f5f6fb;
  height: 40px;
}
.menu_tree
  > .el-tree-node
  > .el-tree-node__children
  > .el-tree-node
  > .el-tree-node__children {
  margin-left: 42px;
}

</style>
